<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API接口测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .test-button {
            background: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background: #66b1ff;
        }
        .result {
            margin-top: 15px;
            padding: 10px;
            background: #f0f9ff;
            border-left: 4px solid #409eff;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        .error {
            background: #fef0f0;
            border-left-color: #f56c6c;
        }
        .success {
            background: #f0f9ff;
            border-left-color: #67c23a;
        }
        h2 {
            color: #303133;
            margin-bottom: 15px;
        }
        .api-info {
            background: #f4f4f5;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>🧪 API接口测试工具</h1>
    <p>测试各个管理页面的API接口是否正常工作</p>

    <div class="test-section">
        <h2>👥 用户管理 API</h2>
        <div class="api-info">GET /api/user/page - 获取用户分页列表</div>
        <button class="test-button" onclick="testUserPage()">测试用户分页</button>
        <button class="test-button" onclick="testUserSave()">测试保存用户</button>
        <div id="user-result"></div>
    </div>

    <div class="test-section">
        <h2>📦 产品管理 API</h2>
        <div class="api-info">GET /api/product/findAll - 获取所有产品</div>
        <button class="test-button" onclick="testProductAll()">测试获取产品</button>
        <button class="test-button" onclick="testHotProducts()">测试热门产品</button>
        <div id="product-result"></div>
    </div>

    <div class="test-section">
        <h2>📋 订单管理 API</h2>
        <div class="api-info">GET /api/order/findAll - 获取所有订单</div>
        <button class="test-button" onclick="testOrderAll()">测试获取订单</button>
        <div id="order-result"></div>
    </div>

    <div class="test-section">
        <h2>👟 定制鞋管理 API</h2>
        <div class="api-info">GET /api/customShoe/all - 获取所有定制鞋</div>
        <button class="test-button" onclick="testCustomShoeAll()">测试获取定制鞋</button>
        <div id="customshoe-result"></div>
    </div>

    <div class="test-section">
        <h2>🚚 物流合作商管理 API</h2>
        <div class="api-info">GET /api/logisticsCooperation/all - 获取所有物流合作商</div>
        <button class="test-button" onclick="testLogisticsCooperation()">测试获取物流合作商</button>
        <div id="logistics-result"></div>
    </div>

    <script>
        // 基础配置
        const API_BASE = 'http://localhost:8080';
        
        // 通用请求函数
        async function makeRequest(url, options = {}) {
            try {
                const response = await fetch(`${API_BASE}${url}`, {
                    headers: {
                        'Content-Type': 'application/json',
                        ...options.headers
                    },
                    ...options
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态: ${response.status}`);
                }
                
                return await response.json();
            } catch (error) {
                throw error;
            }
        }

        // 显示结果
        function showResult(elementId, data, isError = false) {
            const element = document.getElementById(elementId);
            element.className = isError ? 'result error' : 'result success';
            element.textContent = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
        }

        // 测试用户分页
        async function testUserPage() {
            try {
                const result = await makeRequest('/api/user/page', {
                    method: 'POST',
                    body: JSON.stringify({
                        page: 1,
                        pageSize: 10
                    })
                });
                showResult('user-result', result);
            } catch (error) {
                showResult('user-result', `错误: ${error.message}`, true);
            }
        }

        // 测试保存用户
        async function testUserSave() {
            try {
                const testUser = {
                    username: 'testuser_' + Date.now(),
                    realName: '测试用户',
                    email: 'test@example.com',
                    phone: '13800138000',
                    password: '123456'
                };
                
                const result = await makeRequest('/api/user/save', {
                    method: 'POST',
                    body: JSON.stringify(testUser)
                });
                showResult('user-result', result);
            } catch (error) {
                showResult('user-result', `错误: ${error.message}`, true);
            }
        }

        // 测试产品
        async function testProductAll() {
            try {
                const result = await makeRequest('/api/product/findAll');
                showResult('product-result', result);
            } catch (error) {
                showResult('product-result', `错误: ${error.message}`, true);
            }
        }

        // 测试热门产品
        async function testHotProducts() {
            try {
                const result = await makeRequest('/api/product/findHotProducts');
                showResult('product-result', result);
            } catch (error) {
                showResult('product-result', `错误: ${error.message}`, true);
            }
        }

        // 测试订单
        async function testOrderAll() {
            try {
                const result = await makeRequest('/api/order/findAll');
                showResult('order-result', result);
            } catch (error) {
                showResult('order-result', `错误: ${error.message}`, true);
            }
        }

        // 测试定制鞋
        async function testCustomShoeAll() {
            try {
                const result = await makeRequest('/api/customShoe/all');
                showResult('customshoe-result', result);
            } catch (error) {
                showResult('customshoe-result', `错误: ${error.message}`, true);
            }
        }

        // 测试物流合作商
        async function testLogisticsCooperation() {
            try {
                const result = await makeRequest('/api/logisticsCooperation/all');
                showResult('logistics-result', result);
            } catch (error) {
                showResult('logistics-result', `错误: ${error.message}`, true);
            }
        }
    </script>
</body>
</html>